import { useMessage } from '@/hooks'
import { ref, reactive, watch, nextTick } from 'vue'
import { useComDesignStoreWithOut } from '@/store'

import type { CSSProperties } from 'vue'
import type { BwCustomComStructModel } from '@bitwit/base-com-render'

export function useDataComTool(props: any) {
  const { createConfirm } = useMessage()
  const designerStore = useComDesignStoreWithOut()

  const curNodeName = ref<string>('')
  const curVisible = ref<boolean>(false)
  const parentNodes = ref<Array<BwCustomComStructModel>>([])

  const curStyles = reactive<CSSProperties>({})

  /** 删除节点 */
  const onDelNode = () => {
    createConfirm({
      iconType: 'warning',
      title: () => '温馨提醒',
      content: () => `移除当前节，可能会影响到组件运行，是否确定移除？`,
      onOk: async () => {
        const info = designerStore.selectNodeEle
        designerStore.onRemoveNodeEle(info?.nodeId ?? '')
      },
    })
  }

  /** 复制节点 */
  const onCopyNode = () => {
    const info = designerStore.selectNodeEle
    designerStore.onCopyNodeEle(info?.nodeId ?? '')
  }

  /** 选中节点 */
  const onSelect = (item: BwCustomComStructModel) => {
    designerStore.onSeleteNodeInfo(item?.nodeId ?? '')
  }

  /** 获取父节点列表 */
  const getParentNodeList = (
    structList: Array<BwCustomComStructModel>,
    nodeId: string
  ): Nullable<Array<BwCustomComStructModel>> => {
    let list: Nullable<Array<BwCustomComStructModel>> = null
    structList.some((n) => {
      if (n.nodeId === nodeId) {
        list = []
        return true
      } else {
        Object.values(n.children || {}).some((childs) => {
          if (Array.isArray(childs) && childs.length) {
            const cLists = getParentNodeList(childs, nodeId)
            if (Array.isArray(cLists)) {
              list = [...cLists, n]
              return true
            }
          }
        })
        return Array.isArray(list)
      }
    })
    return list
  }

  /** 初始化当前节点信息 */
  const initNodeinfo = (nodeInfo: BwCustomComStructModel) => {
    const structs = designerStore.getStructList
    const { nodeId, nodeName } = nodeInfo

    parentNodes.value = getParentNodeList(structs, nodeId) ?? []
    curNodeName.value = nodeName
  }

  /** 计算工具的位置 */
  const getEleTooStyle = (nodeId?: Nullable<string>) => {
    const desiginBox = props.getContainer()
    const ele = document?.getElementById(`com_${nodeId ?? ''}`)

    if (ele && desiginBox) {
      const eRect = ele.getBoundingClientRect()
      const bRect = desiginBox.getBoundingClientRect()
      const { scrollTop, scrollLeft } = desiginBox
      const pTop = eRect.top - bRect.top + (scrollTop || 0)
      const pLeft = eRect.right - bRect.left + (scrollLeft || 0)

      curStyles.display = 'flex'
      curStyles.left = `${pLeft}px`
      curStyles.top = `${pTop - (pTop <= 20 ? 0 : 20)}px`
    } else {
      curStyles.display = 'none'
    }
    console.log(curStyles)
  }

  watch(
    () => designerStore.selectNodeEle,
    (newVal) => {
      if (newVal) {
        initNodeinfo(newVal)
        getEleTooStyle(newVal.nodeId)
      } else {
        nextTick(() => getEleTooStyle())
      }
    },
    { deep: true, immediate: true }
  )

  return {
    curStyles,
    curVisible,
    parentNodes,
    curNodeName,

    onSelect,
    onDelNode,
    onCopyNode,
    getEleTooStyle,
  }
}
